import { CSSProperties, ExtractPropTypes, PropType } from "vue"

/**
 * 按钮内容类型
 */
export type SwipeOptionData = {
  /** 文本内容 */
  text: string,
  /** 图标 */
  icon?: string,
  /** 背景颜色 */
  bgColor?: string,
  /** 文字颜色 */
  color?: string,
  /** 圆角值 */
  borderRadius?: string,
  /** 文字大小 */
  fontSize?: string,
  /** 图标大小 */
  iconSize?: string,
  /** 按钮自定义样式 */
  customStyle?: CSSProperties
}

/**
 * props参数
 */
export const swipeActionItemProps = {
  /** item标识, 如果为空则使用对应的序号 */
  name: {
    type: [String, Number],
    default: ''
  },
  /** 可选项数据 */
  options: {
    type: Array as PropType<Array<SwipeOptionData>>,
    default: () => {
      return []
    }
  },
  /** 禁用滑动 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 点击按钮后自动关闭 */
  autoClose: {
    type: Boolean,
    default: true
  },
  /** 滑动距离阈值，大于此值才会打开菜单 */
  threshold: {
    type: [String, Number],
    default: 20
  },
  /** 动画过渡时间, 单位ms */
  duration: {
    type: [String, Number],
    default: 200
  }
}
export type SwipeActionItemProps = ExtractPropTypes<typeof swipeActionItemProps>
